<script lang="ts" setup>
import {ArrowLeft, ArrowRight, DArrowLeft, DArrowRight} from "@element-plus/icons-vue";
import {Page} from "@/common/Page.ts";
import {onMounted, onUnmounted, ref} from "vue";
const {
    modelValue
} = defineProps<{
    modelValue: Page
}>()

const emit = defineEmits(["modelValue:update", "initTable"])
const nextPage = ref<number>()

onMounted(() => {
    setPage(modelValue.page)
})

function initTableData() {
    emit("initTable")
}

function keydown(e) {
    if (e.keyCode == 13) {
        if (nextPage.value > modelValue.count)
            nextPage.value = modelValue.count
        if (nextPage.value < 1)
            nextPage.value = 1
        modelValue.page = nextPage.value
        setPage(modelValue.page)
    }
}

function setPage(number: number) {
    modelValue.page = number
    initTableData()
}

onMounted(() => {
    window.addEventListener("keydown", keydown)
})

onUnmounted(() => {
    window.removeEventListener("keydown", keydown, false)
})
</script>
<template>
    <div style="margin-top: 10px;">
        <span style="margin-right: 10px;font-size: small;color:#666;">共{{ modelValue.total }}条</span>
        <el-select style="width: 100px;" v-model="modelValue.pageSize" @change="initTableData()">
            <el-option label="50" value="50"/>
            <el-option label="100" value="100"/>
            <el-option label="200" value="200"/>
            <el-option label="400" value="400"/>
        </el-select>
        <el-button
                text
                @click="()=>{
                    modelValue.page -= 10
                    setPage(modelValue.page)
                }"
                :disabled="modelValue.page <= 10"
        >
            <el-icon>
                <DArrowLeft/>
            </el-icon>
        </el-button>
        <el-button
                text
                @click="()=>{
                    modelValue.page -= 1
                    setPage(modelValue.page)
                }"
                :disabled="modelValue.page <= 1"
        >
            <el-icon>
                <ArrowLeft/>
            </el-icon>
        </el-button>
        <el-button
                text
                @click="()=>{
                    modelValue.page = modelValue.count - 4
                    setPage(modelValue.page)
                }"
                v-if="modelValue.count - modelValue.page < 2 && modelValue.count > 4"
        >
            {{ modelValue.count - 4 }}
        </el-button>
        <el-button
                text
                @click="()=>{
                    modelValue.page = modelValue.count - 3
                    setPage(modelValue.page)
                }"
                v-if="modelValue.count - modelValue.page < 1 && modelValue.count > 3"
        >
            {{ modelValue.count - 3 }}
        </el-button>
        <el-button
                text
                @click="()=>{
                    modelValue.page = modelValue.page - 2
                    setPage(modelValue.page)
                }"
                v-if="modelValue.page > 2"
        >
            {{ modelValue.page - 2 }}
        </el-button>
        <el-button
                text
                @click="()=>{
                    modelValue.page = modelValue.page - 1
                    setPage(modelValue.page)
                }"
                v-if="modelValue.page > 1"
        >
            {{ modelValue.page - 1 }}
        </el-button>
        <el-button
                color="#d5dff5"
        >
            {{ modelValue.page }}
        </el-button>
        <el-button
                text
                @click="()=>{
                    modelValue.page = modelValue.page +1
                    setPage(modelValue.page)
                }"
                v-if="modelValue.page <= modelValue.count - 1"
        >
            {{ modelValue.page + 1 }}
        </el-button>
        <el-button
                text
                @click="()=>{
                    modelValue.page = modelValue.page +2
                    setPage(modelValue.page)
                }"
                v-if="modelValue.page <= modelValue.count -2"
        >{{ modelValue.page + 2 }}
        </el-button>
        <el-button
                text
                @click="()=>{
                    modelValue.page = modelValue.page +3
                    setPage(modelValue.page)
                }"
                v-if="modelValue.page <= 1 && modelValue.count > 3"
        >
            {{ modelValue.page + 3 }}
        </el-button>
        <el-button
                text
                @click="()=>{
                    modelValue.page = modelValue.page +4
                    setPage(modelValue.page)
                }"
                v-if="modelValue.page <= 2 && modelValue.count > 4"
        >{{ modelValue.page + 4 }}
        </el-button>
        <el-button
                text
                @click="()=>{
                    modelValue.page += 1
                    setPage(modelValue.page)
                }"
                :disabled="modelValue.count - modelValue.page < 1"
        >
            <el-icon>
                <ArrowRight/>
            </el-icon>
        </el-button>
        <el-button
                text
                @click="()=>{
                    modelValue.page += 10
                    setPage(modelValue.page)
                }"
                :disabled="modelValue.count - modelValue.page < 10"
        >
            <el-icon>
                <DArrowRight/>
            </el-icon>
        </el-button>
        <span style="margin-right: 10px;font-size: small;color:#666;">共{{ modelValue.count }}页</span>
        <el-input
                style="width: 70px;margin-left: 20px;"
                placeholder="去往"
                v-model="nextPage"
        />
    </div>
</template>

<style scoped>

</style>